<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6的箭头函数</title>
</head>

<body>
  <script>
    // var fn1 = function () { console.log('我是fn1函数') }
    // fn1()
    // var fn2 =  () => { console.log('我是fn2函数') }
    // fn2()

    /*
    箭头函数的特殊之处

    1. 箭头函数某些时候可以省略（）
      =>当你的形参只有一个的时候，可以不写（）

    2.箭头函数某些时候可以省略｛｝
      =>当你代码只有一句话的时候，可以不写｛｝
      =>并且会自动把这一句话的结果当做函数的返回值

    3.箭头函数内没有arguments

    4.箭头函数内没有this
      =>箭头函数内的this就是外部作用域的this

    5.箭头函数是匿名函数 不能命名
      */



    //1.
    // var fn1 = () => { console.log('我没有形参') }
    // fn1()

    // var fn2 = (a) => {console.log('我一个形参：',a)}  
    // fn2(100)
    // var fn2 = a => {console.log('我一个形参：',a)}  
    // fn2(200)

    // var fn3 = (a,b) => {console.log('我两个形参：',a,b)}  
    // fn3(100,200)

    //2.
    // var fn1 = (a,b) => {
    //     return a+b
    // }
    // console.log(fn1(10,20))

    // var fn1 = (a,b) =>  a+b       
    // console.log(fn1(10,20))

    //3.
    // var fn1=()=>{
    //     console.log(arguments)//报错
    // }
    // fn1(100,200,300)

    // var fn2=function(){
    //     console.log(arguments)//arguments伪数组
    // }
    // fn2(100,200,300)

    //4.
    var obj = {
      a: 2,
      fn: function () { console.log(this.a) },
      fn2: () => { console.log(this.a) }
    }
    // a = 2
    obj.fn()//this因为fn函数被obj调用，所以this是obj
    obj.fn2()//因为是箭头函数，内部没有this，就是外部作用域的this（外部作用域就是全局作用域）
  </script>
</body>

</html>